<template>
	<view class="flex flex-column px-2 bg-white">
		<div class="flag-title light-color pt-3 mb-2">属性配置</div>
		<view class="rounded-lg p-2 bgeff3f8 fs-32 boxshadow border">
			<view>
				<view class="flex align-center fs-24 mb-2">
					<text class="flex-1">属性名</text>
					<text class="flex-2 ml-2">属性值</text>
				</view>
				<view class="flex mb-2" v-for="(item,index) in attributes" :key="index">
					<view class="flex-1">
						<u-input v-model="item.name" placeholder="属性" :disabled="index === 0" :clearable="false"
							:custom-style="defaultInputStyle" />
					</view>
					<view class="flex align-center flex-wrap flex-2 ml-2">
						<block v-for="(val,vidx) in item.values" :key="vidx">
							<view class="mr-1 mb-1 border position-relative rounded" style="width: 100px;">
								<u-input v-model="val.value" :clearable="false" :custom-style="defaultInputStyle" placeholder="值" />
								<u-icon v-if="!(index === 0 && vidx === 0)" class="position-absolute top-0 right-0 mr-1"
									style="margin-top:26rpx;" name="close" size="20" color="#999"
									@click="delAttrVal(index,vidx)"></u-icon>
							</view>
						</block>
						<view class="flex align-center fte87722 fs-32" style="width: 100px;margin-bottom:10rpx;"
							@click="addAttr(index)">
							<u-icon name="plus" size="30"></u-icon>
							<text class="ml-1">添加</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex align-center justify-between">
				<view class="flex align-center fte87722 fs-28" @click="addAttrList">
					<u-icon name="plus" size="30"></u-icon>
					<text class="ml-1">添加属性</text>
				</view>
				<view class="flex align-center bge87722 text-white border bde87722 rounded-circle px-2 py-1 fs-28 "
					@click="createList">
					<u-icon name="list-dot" size="30"></u-icon>
					<text class="ml-1">生成SKU列表</text>
				</view>
			</view>


		</view>

		<div class="flag-title light-color pt-3 mb-2">SKU列表</div>
		<view>
			<u-table>
				<u-tr>
					<u-th>规格属性</u-th>
					<u-th>日租价格</u-th>
					<u-th>库存</u-th>
					<u-th>排序</u-th>
					<u-th>状态</u-th>
				</u-tr>
				<u-empty style="height: 400rpx;" v-if="rulesList.length === 0" text="您还没生成sku列表" mode="data"></u-empty>
				<u-tr v-for="(rule,index) in rulesList" :key="index">
					<u-td>
						<view class="flex align-center justify-center flex-wrap" style="height: 74rpx;">{{rule.ruleName}}</view>
					</u-td>
					<u-td><u-input v-model="rule.price" type="number" :clearable="false" border placeholder="" /></u-td>
					<u-td><u-input v-model="rule.stock" type="number" :clearable="false" border placeholder="" /></u-td>
					<u-td><u-input v-model="rule.sort" type="number" :clearable="false" border placeholder="" /></u-td>
					<u-td>
						<view class="flex align-center justify-center" style="height: 38px;">
							<text class="fs-24 mr-1">启用</text>
							<!-- <text class="fs-24 mr-1">启用</text>
							<u-line color="#333" direction="col" /> -->
							<!-- <text v-if="index !== 0" class="fs-24 ml-1" @click="delAttrVal(index,rindex)">删除</text> -->
						</view>
					</u-td>
				</u-tr>
			</u-table>
		</view>

		<u-gap height="40" bg-color="#fff"></u-gap>
		<div class="submit  text-white fs-32" :class="!this.rulesList.length?'bgcecece':'bge87722cc'"
			@click="validatorStep1Form">保存配置</div>
		<u-gap height="80" bg-color="#fff"></u-gap>

	</view>
</template>

<script>
	import config from "@/config/api.js";
	import {
		storeGoodsDetails,
		manageSkuData
	} from "@/api/store.js";
	export default {
		data() {
			return {
				defaultInputStyle: {
					background: "#f7f7f7",
					padding: "0 20rpx",
					"border-radius": "10rpx",
				},
				attributes: [{
					name: '租期',
					values: [{
						value: '1'
					}, {
						value: '5'
					}]
				}],
				rulesList: [],
				id: null,
				goodsDetails: {}
			}
		},
		onLoad(query) {
			this.id = query.id || ''
			if (!this.id) return
			this.storeGoodsDetails()
		},
		methods: {
			storeGoodsDetails() {
				storeGoodsDetails({
					id: this.id
				}).then(res => {
					this.goodsDetails = res.data.data.goods
					if (this.goodsDetails.sku_attr.length) {
						this.attributes = this.goodsDetails.sku_attr.map(item => {
							return {
								name: item.name,
								values: item.item.map(val => {
									return {
										value: val
									}
								})
							}
						})
					}

					this.rulesList = this.goodsDetails.sku.skus.map((item, index) => {
						console.log(item)
						item.specs2 = JSON.parse(JSON.stringify(item.specs))
						Object.keys(item.specs2).forEach(key => {
							if (key === '租期') {
								item.specs2[key] = item.specs2[key] + '天'
							}
						})
						return {
							...item,
							sort: index,
							ruleName: Object.values(item.specs2).join(','),
							name: Object.values(item.specs).join(','),
							spec_attrs: item.specs
						}
					})
				})
			},
			validatorStep1Form() {
				this.manageSkuData()
			},
			manageSkuData() {
				if (!this.rulesList.length) return
				const isprice = this.rulesList.some(rule => !rule.price && rule.price !== 0)
				const isstock = this.rulesList.some(rule => !rule.stock && rule.stock !== 0)
				if (isprice || isstock) {
					uni.showToast({
						title: '请完善sku列表信息',
						icon: 'none'
					})
					return
				}
				const sku_attr = this.attributes.map(item => {
					return {
						name: item.name,
						item: item.values.map(rule => rule.value)
					}
				})

				const data = {
					goods_id: this.id,
					sku_attr: sku_attr,
					sku_data: this.rulesList
				}
				console.log(data)
				manageSkuData(data).then(res => {
					if (res.data.code === 1) {
						uni.showToast({
							title: res.data.msg
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			createList() {
				this.rulesList = this.attributesToSpecs(this.attributes)
				console.log(this.rulesList)
			},
			attributesToSpecs(attributes) {
				// 生成所有属性值的笛卡尔积组合
				let combinations = [{}];
				const list = attributes.filter(item => item.name && item.values.filter(v => v.value).length)
				list.forEach(attr => {
					const temp = [];
					// 遍历现有组合
					combinations.forEach(comb => {
						// 修复：添加对attr.values的遍历循环
						attr.values.forEach(value => { // 这里补充了forEach循环
							temp.push({
								...comb,
								[attr.name]: value.value
							});
						});
					});
					combinations = temp;
				});

				// 转换为目标格式
				return combinations.map((comb, index) => {
					// console.log(comb)
					// Object.keys(comb).forEach(key => {
					// 	if (key === '租期') {
					// 		console.log(comb)
					// 		comb[key] = comb[key] + '天'
					// 	}
					// })
					return {
						spec_attrs: comb,
						name: Object.values(comb).join(','),
						price: '',
						stock: 99,
						status: 1,
						sort: index
					}
				});
			},
			addAttr(index) {
				this.attributes[index].values.push({
					value: ''
				})
			},
			delAttrVal(index, vidx) {
				this.attributes[index].values.splice(vidx, 1)
				if (index !== 0 && vidx === 0) {
					this.attributes.splice(index, 1)
				}
			},
			addAttrList() {
				this.attributes.push({
					name: '',
					values: [{
						value: ''
					}]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.column {
		padding: 32rpx;
		margin-bottom: 20rpx;
		background: #fff;
	}

	.tips {
		color: #999;
		font-size: 24rpx;
		line-height: 1.2;
		margin-top: 10rpx;
	}

	.flag-title {
		font-size: 42rpx;
		font-weight: bold;
	}

	.submit,
	.notice {
		font-weight: bold;
		font-size: 28rpx;

		height: 92rpx;
		text-align: center;
		letter-spacing: 4rpx;
		line-height: 92rpx;
		border-radius: 20rpx;
	}
</style>